<ion-content class="{{theme}}" (click)="HideSwitchs()">
  <div class="menu">
    <ion-chip class="menu_left">
      <ion-avatar (click)="SwitchCity($event)">
        <img src="../../assets/imgs/app_icon/switch.svg">
      </ion-avatar>
      <ion-label>
        {{city}}
        <ion-icon name="heart"  class="white" (click)="Addcollection(city)" *ngIf='!isCollection'></ion-icon>
        <ion-icon name="heart"  class="red" (click)="Removecollection(city)" *ngIf='isCollection'></ion-icon>
      </ion-label>
    </ion-chip>
    <ion-icon class="menu_right" (click)="goSetting()"><img src="../../assets/imgs/app_icon/menu.svg"></ion-icon>
    <ul class="switch">
      <div class="sanjiao"></div>
      <li *ngIf='!collectionArray'>还没收藏，点击爱心可收藏</li>
      <li *ngFor="let item of collectionArray" (click)="getWeather(item)">{{item}}</li>
    </ul>
  </div>
  <div class="temperature">
    <div class="update_time">中央气象台 {{update_time}}发布</div>
    <div>{{degree}}°</div>
  </div>
  <div class='big_div'>
    <div class="line"></div>
    <div class="weather_info">
      <div class="weather_info_type">{{weather}}</div>
      <div class="weather_info_humidity">
        <p>{{today}}</p>
        <p>温度{{tem_day}} ~ {{tem_night}}摄氏度</p>
        <p>{{wind_direction}}{{wind_power}}</p>
        <p>空气{{aq}}</p>
      </div>
      <div class="weather_img">
        <img src={{weather_code}}>
      </div>
    </div>

    <div class="forecast_1h">
      <div style="position: absolute;left: 0;top:0;width: 100%;height: 100%;z-index: 2;">
        <div class="forecast_1h_list" *ngFor="let item of forecast_1h">
          <div>{{item.time}}</div>
          <div><img src="../../assets/imgs/weather_icon/{{item.weather}}.svg"></div>
          <div>
            <p>{{item.weather}} {{item.tem}}°</p>
            <p>{{item.wdd}} {{item.wdp}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="forecast_24h">
    <ion-slides pager="true">
      <ion-slide>
        <ion-grid>
          <ion-row>
            <ion-col *ngFor="let item of forecast_24h_left">
              <p>{{item.week_chi}}</p>
              <p style="margin:1.5vw 0">{{item.weather_day}} {{item.tem_day}}°</p>
              <img src="../../assets/imgs/weather_icon/{{item.weather_day}}.svg">
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-slide>
      <ion-slide>
        <ion-grid>
          <ion-row>
            <ion-col *ngFor="let item of forecast_24h_right">
              <p>{{item.week_chi}}</p>
              <p style="margin:1.5vw 0">{{item.weather_day}} {{item.tem_day}}°</p>
              <img src="../../assets/imgs/weather_icon/{{item.weather_day}}.svg">
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-slide>
    </ion-slides>
  </div>
</ion-content>
